<template>
    <div class="zh-archives-list">
        <div class="classIndex_h">
            <span>学生档案</span>
        </div>
        <div class="zh-table">
            <div class="zh-table-open clear">


                <div class="zh-open-right fl">
                    <!-- <el-button type="primary" @click="linkTo('', 1)">批量导入</el-button> -->
                    <el-button type="primary" @click="exportSelect">导出所选</el-button>
                    <router-link :to="{ path: '/class/archives/import', query: { id: path } }">批量导入</router-link>
                </div>

                <div class="zh-open-left fr">
                    <el-input v-model="keyword" placeholder="账号、姓名、学号" @keyup.enter.native="searchList"
                        @change="searchList" suffix-icon="el-icon-search"></el-input>
                    <!-- <el-button type="primary" @click="searchList">搜索</el-button> -->
                </div>
            </div>
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table :data="listData" @selection-change="tableSelectionChange" border max-height="600"
                    style="width: 100%">
                    <el-table-column type="selection" width="50" align="center">
                    </el-table-column>
                    <!-- <el-table-column
                        label="序号"
                        align="center"
                        show-overflow-tooltip
                        width="50">
                    </el-table-column> -->
                    <el-table-column prop="number" label="学校" align="center" v-if="user_level === 0"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="number" label="账号" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="rename" label="班级" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="" label="性别" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{ scope.row.sex === '1' ? '男' : '女' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="study_code" label="学号" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="teacher_name" label="班主任" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="parent_name" label="家长" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="telphone" label="联系方式" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="addr" label="家庭住址" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="face_path" label="人脸照片" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <img v-if="scope.row.face_path" @click="openViewImg(scope.row)" :src="BASE_URL + scope.row.face_path" alt=""
                                style="width: 28px; height: 35px">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100" fixed="right">
                        <template slot-scope="scope">
                            <router-link
                                :to="{ path: '/class/archives/edit', query: { id: path, uid: scope.row.id } }">编辑</router-link>
                            <!-- <el-button v-if="user_level !== 0" @click="clearRow(scope.row)" type="text" class="delete-button">清空</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="fileParams.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="fileParams.pae_size" layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="人脸照片" :visible.sync="dialogVisible" width="550px">
            <div style="padding: 30px;">
                <img :src="viewImgUrl" alt="" style="width: 100%;height: 100%;margin: auto;">
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            viewImgUrl: null,
            dialogVisible: false,
            path: this.$route.query.id,
            rowLen: 0,
            loading: {
                status: false,
                txt: '获取数据...',
            },
            gradeList: [], // 年级列表
            fileParams: {
                app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
                org_id: null,
                keyword: '',
                page_index: 1,
                page_size: 10,
            },
            keyword: '',
            total_number: 0,
            selected: [],
            listData: [],
            user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
        };
    },
    created() {

    },
    watch: {
        '$store.state.changData': {
            handler(val, newval) {
                this.path = sessionStorage.getItem('classId')
                this.getList()
            },
            immediate: true
        }
    },
    computed: {
        changData() {
            return deep_clone(this.$store.state.changData);
        },
    },
    methods: {

        /**
         * 跳到变更记录页面
         * @param {Number} id 记录id
         * @param {Number} key 标识
         */
        linkTo(id, key) {
            switch (key) {
                case 1:
                    this.$router.push("/user/studystatus/studystatus-import")
                    break;
                case 2:
                    this.$router.push('/user/studystatus/archives-edit/' + id);
                    break;
                case 3:
                    this.$router.push('/user/studystatus/change-log/' + id)
                    break;
                case 4:
                    this.$router.push('/user/studystatus/archives-edit/' + id + '?level=detail');
                    break;
            }
        },
        /**
         * 根据筛选条件获取列表
         */
        searchList() {
            this.fileParams.keyword = this.keyword;
            this.fileParams.page_index = 1;

            this.getList();
        },
        /**
         * 获取档案列表
         */
        getList() {
            this.loading.status = true;
            this.fileParams.org_id = this.path
            let success = (res => {
                this.loading.status = false
                this.listData = res.data.data;
                this.total_number = res.data.data_sum;
                this.$forceUpdate(); // 强制渲染
            });

            this.$ajax.get('api/studystatus/get_studystatus_list', { params: this.fileParams, func: { success: success } })
        },
        /**
         * 清空数据
         * @param {String || Array} param 删除数据的 id
         */
        clearData(param) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);

                if (this.listData.length - this.rowLen === 0) {
                    if (this.fileParams.page_index > 1) {
                        this.fileParams.page_index--;
                    } else {
                        this.fileParams.page_index = 1;
                    }
                }

                this.getList();
            });
            let fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })

            this.$ajax.delete('api/studystatus/clean_studystatus', { params: { id: param }, func: { success: success, fail: fail } });
        },
        /**
         * 清空一条记录
         * @param {Object} obj 记录信息
         */
        clearRow(obj) {
            let yes = (res => {
                this.rowLen = 1;
                this.clearData(obj.id);
            })
            let cancel = (res => { })

            this.e_confirm({ yes: yes, cancel: cancel, txt: '确定将 ' + obj.number + ' 清空吗？' });
        },
        /**
         * 选中记录
         * @param {Array} val 选中的id
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 每页数量
         */
        handleSizeChange(val) {
            this.fileParams.page_index = 1;
            this.fileParams.page_size = val;

            this.getList();
        },
        /**
         * 翻页
         */
        handleCurrentChange(val) {
            this.fileParams.page_index = val;

            this.getList();
        },
        /**
         * 导出选中的记录
         */
        exportSelect() {
            if (this.listData.length === 0 || this.selected.length === 0) {
                this.$message.warning("导出的数据为空！")
                return false;
            }

            let _id = [];
            this.selected.forEach(item => {
                _id.push(item.id);
            })

            let params = {
                id: _id,
                keyword: this.keyword ? this.keyword : null,
                app_code: this.fileParams.app_code ? this.fileParams.app_code : null
            }

            this.export_excel('api/studystatus/download_student_status', params, '档案管理');
        },
        openViewImg(row) {
            this.dialogVisible = true;
            this.viewImgUrl = this.BASE_URL + row.face_path;
        }
    },
};
</script>
